import {Flex, Button } from 'antd-mobile';
import Router from 'next/router'
import Link from 'next/link'

import { imgBase }  from '../../utils'
import styles from './TabBottom.module.scss';

// const IconBox = (icon) => {
//   return (
//     <div className="icon-box">
//       <img src={icon} />
//     </div>
//   )
// }

const tabData = [
  {title: "首页", href: '/index', as: '/index', icon: `${imgBase}/tab/ico_home@3x.png`, selectedIcon: `${imgBase}/tab/ico_home_select@3x.png`  },
  // {title: "关注", href: '/guanzhu', icon: `${imgBase}/guzhu-icon.png`, selectedIcon: `${imgBase}/guzhu-icon-a.png`  },
  {title: "MBI指数", href: "/brandrankings", as: '/brandrankings', icon: `${imgBase}/tab/ico_mbi@3x.png`, selectedIcon: `${imgBase}/tab/ico_mbi_select@3x.png`  },
  {title: "MCI指数", href: '/hotelrankings', as: '/hotelrankings', icon: `${imgBase}/tab/ico_mci@3x.png`, selectedIcon: `${imgBase}/tab/ico_mci_select@3x.png` },
  {title: "MVI指数", href: '/mvi/wineshopMviRankings', as: '/mvi_rankings', icon: `${imgBase}/tab/ico_mvi@3x.png`, selectedIcon: `${imgBase}/tab/ico_mvi_select@3x.png` },
];

export default function TabBottom({selectedTab}) {
 return <nav id="footer-box" className={styles["tab-bottom-box"]}>
    <Flex justify="around">
        {
          tabData.map((item, index) => {
            const { title, href, icon, selectedIcon, as } = item;
            return (
              <Link key={`bt-h${index}`} href={href} as={as}  >
                <a className={styles['bottom-href']}  >
                  <img src={selectedTab === title? selectedIcon : icon} />
                  <p className={selectedTab === title ? styles.active : ''}>{title}</p>
                </a>
              </Link>
            )
          })
        }
    </Flex>
  </nav>
}